<template>
	<view>
		<view class="my-search-container" :style="{'background-color': bgcolor}">
			<input type="text" class="my-search-box" placeholder="请输入要搜索的物品" v-model="search" />
			<button class="my-search-btn" :style="{'background-color': btnbgcolor}"
				@click="searchBoxHandler">搜索</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import search from '../../store/search';

	export default {
		name: "buji-search",
		props: {
			// 背景颜色
			bgcolor: {
				type: String,
				default: ' #F57E53'
			},
			// 按钮颜色背景颜色
			btnbgcolor: {
				type: String,
				default: '#FFCA28'
			},
		},
		data() {
			return {
				search: "",
			};
		},
		methods: {
			...mapMutations('buji_search', ['updateSearch']),
			// 点击了模拟的 input 输入框
			searchBoxHandler() {
				// 触发外界通过 @click 绑定的 click 事件处理函数
				this.$emit('click')
			}
		},
		watch: {
			search: {
				immediate: true,
				handler(newVal, oldVal) {
					this.updateSearch(newVal)
				}
			}
		}
	}
</script>

<style lang="scss">
	.my-search-container {
		// 移除背景颜色，改由 props 属性控制
		// background-color: #F57E53;
		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.my-search-box {
		height: 72rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx black solid;
		width: 80%;
		border-radius: 36rpx 0 0 36rpx;

		.placeholder {
			font-size: 30rpx;
			padding-left: 20rpx;
		}
	}

	.my-search-btn {
		height: 76rpx;
		border-radius: 0 36rpx 36rpx 0;
		border: 1rpx black solid;
		line-height: 72rpx;
		font-size: 36rpx;
		margin-left: -8rpx;
	}
</style>
